// ========工具封装:根据id来获取元素
function $(id) {
    return document.getElementById(id);
}
// ========创建div, className是其类名
function creatediv(className) {
    var div = document.createElement('div');
    div.className = className;
    return div;
}
// =========创建一个类名的数组，其中一个为黑块cell black, 其余为白块cell
function creatcell() {
    var temp = ['cell', 'cell', 'cell', 'cell', ];
    var i = Math.floor(Math.random() * 4);//随机产生黑块的位置 Math.random()函数参数 0~1的随机数
    temp[i] = 'cell black';
    return temp;
}
// 创造一个<div class="row">并且有四个子节点<div class="cell">
function createrow() {
    var con = $('con');
    var row = creatediv('row'); //创建div className=row
    var arr = creatcell(); //定义div cell的类名,其中一个为cell black

    con.appendChild(row); // 添加row为con的子节点

    for (var i = 0; i < arr.length; i++) {
        row.appendChild(creatediv(arr[i])); //添加row的子节点 cell
    }
    //从上面添加新的row
    if (con.firstChild == null) {
        con.appendChild(row);
    } else {
        con.insertBefore(row, con.firstChild);
    }
}
//全局变量
var score=0; //分数初始值0
var speed=4;  //默认下移速度
var clock=null; //定时器
var start_flag = true;//开始按钮的状态

//黑块向下移动
function move(e) {
    var con = $('con');
    //获取con的top值
    var top = parseInt(window.getComputedStyle(con, null)['top']);
    if(speed + top > 0){
        top = 0; 
    }else{
        top += speed;
    }       
    con.style.top = top + 'px';//不断移动top值，使它动起来
    
    //保留的最多row的数量为5，那么当rows的length为6时就要删除最后一个row
    if($('con').childNodes.length==6){
        $('con').removeChild($('con').lastChild);
    }    
    over();
    
    if(top == 0){
        createrow();// 下降结束一行，则在最顶部增加一行，完成下降的连续性
        con.style.top = '-100px';//并重新隐藏新加的一行
    }else{
        top += speed;
    }
}
//=========判断黑块触底结束
function over() {
    var rows = $('con').childNodes;
    if ((rows.length == 5) && (rows[rows.length - 1].pass !== 1)) {
        fail();
    }
    // for(let i = 0; i < rows.length; i++){
    //     if(rows[i].pass1 == 1) {
    //         fail();
    //     }
    // }
}
// =========游戏结束
function fail() {
    clearInterval(clock); //清除计时器
    alert('Game over!'+'\n'+'Final Score:'+score);
    $('score').innerHTML = 0; //分数清零
    $('con').innerHTML =  ""; 
    start_flag = true;
    $('start').innerHTML = "start";
}

//判断是否为黑块
function  juge(ev){    
    var e = ev ||window.event;
    //点击目标元素,判断类名中是否包含 black
    if(e.target.className.indexOf('black')==-1){
        fail();//点到白块游戏结束
    }else{
        e.target.className='cell'  //让黑块颜色变成白色
        e.target.parentNode.pass=1;//定义属性pass，表明此行row的黑块已经被点击
        AddScore();
    }
}
// 记分，当分数是10 的倍数时加速下移，越来越快
function AddScore() {
    score+=1; 
    $('score').innerHTML = score;
    if (score % 10 == 0) {
        speed+=2;
    }
}
//开始游戏
$('start').onclick=function(ev){
    if(start_flag){
        score=0;
        speed=4;
        clock=setInterval('move()',50);
        $('con').onclick=function(ev){
            juge(ev);
        }
        $('start').innerHTML = "playing games";
        start_flag = false;
    }    
}
